<template>
  <div class="reqDetailContent">
    <ul>
      <li>
        <span>需求名称</span>
        <span>{{ demandDetail.demandName }}</span>
      </li>
      <li>
        <span>需求描述</span>
        <span>{{ demandDetail.demandDescribe }}</span>
      </li>
      <li>
        <span>所属企业</span>
        <span>{{ enterUser(demandDetail.enterpriseId) }}</span>
      </li>
      <li>
        <span>项目名称</span>
        <span v-if="isShowProjectName"
          >{{ projectName }}
          <i
            class="el-icon-edit"
            @click="isShowProjectName = false"
            style="font-size: 20px;"
          ></i
        ></span>
        <el-input
          v-else
          @blur="isShowProjectName = true"
          v-model="projectName"
        ></el-input>
      </li>
      <li>
        <span>分类</span>
        <!-- <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
        <el-select v-model="categoryId" placeholder="请选择项目分类">
          <el-option
            v-for="item in demandClassify"
            :label="item.value"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </li>
      <li>
        <span>联系方式</span>
        <span v-if="isShowContact"
          >{{ contact }}
          <i
            class="el-icon-edit"
            @click="isShowContact = false"
            style="font-size: 20px;"
          ></i
        ></span>
        <el-input
          v-else
          @blur="isShowContact = true"
          v-model="contact"
        ></el-input>
      </li>
    </ul>
    <!-- 成员分布 -->
    <div class="personAssign">
      <h2>
        <span>成员分配</span>
      </h2>

      <div
        v-for="(item, index) in currentPersonChoose"
        :key="index"
        class="selectedPerson"
      >
        <span>{{ item[0] }}</span>
        <span>{{ item[1] }}</span>
        <span>{{ item[2] }}</span>
        <span @click="deleteOnePersonByInd(index)"> X </span>
      </div>

      <div class="personCate">
        <span>
          <i class="el-icon-edit" v-if="addPlaceState" @click="addPlace"></i>
          <el-input v-else v-model="placeData"></el-input>
        </span>
        <span>
          <el-cascader
            v-model="value"
            :options="options"
            @change="handleChange"
          ></el-cascader
        ></span>
      </div>
    </div>
    <!-- 添加附件 -->
    <div class="appendix">
      <h2>添加附录</h2>
      <ul>
        <li v-for="(item, index) in 2" :key="index">
          <span><i class="el-icon-paperclip"></i> 文档.md </span>
          <span>删除</span>
        </li>
      </ul>
    </div>
    <el-button size="mini" type="primary" class="saveBtn" @click="saveProject"
      >保存</el-button
    >
  </div>
</template>

<script>
import {
  ReqDemandDetail,
  ReqAllDemandClassify,
  ReqCooperPersonUser,
  ReqEnterPriseUser,
  ReqAddProject,
  ReqPersonalUser,
  ReqadminList,
  ReqPersonal
} from "../../../request/index.js";
export default {
  data() {
    return {
      options: [],
      value: "",
      isShowProjectName: true,
      demandDetail: {},
      demandClassify: [],
      projectName: "",
      categoryId: "",
      isShowContact: true,
      currentPersonChoose: [],
      enterPriseUser: [],
      value: [],
      contact: "",
      newArr: [],
      roles: [],
      myCpnusers: [], //赋能中心个人顾问
      adminUsers: [], //管理员用户
      otherCpnusers: [], //其他企业的个人顾问
      addPlaceState: true,
      placeData:""
    };
  },
  methods: {
    addPlace() {
      this.addPlaceState = false
    },
    enterUser(id) {
      return this.enterPriseUser.find((item) => item.id == id)?.industry;
    },
    async getDemandDetailById() {
      const query = this.$router.history.current.query;
      const resultData = await ReqDemandDetail(query.demandId);
      const {
        demandVo: { demand, relation },
      } = resultData;
      console.log(demand);
      console.log(relation);
      const reqDetailData = {
        ...demand,
        relation: relation.value,
      };
      this.demandDetail = reqDetailData;
    },
    // 获取全部的需求分类
    async getAllReqClassify() {
      let demandClassify = await ReqAllDemandClassify();
      let { category } = demandClassify;
      this.demandClassify = category;
    },
    // 删除人
    deleteOnePersonByInd(index) {
      this.currentPersonChoose.splice(index, 1);
    },
    // 三级联动
    handleChange(value) {
      console.log(value);
      this.newArr.push(value)
      let newArr = []
      newArr.push(this.placeData)
      this.options.forEach(item => {
        if(item.value == value[0]) {
          newArr.push(item.label)
          item.children.forEach(it => {
            if(it.value == value[1]) {
              newArr.push(it.label)
            }
          })
        }
      })
      this.currentPersonChoose.push(newArr)
      value = []
    },
    // // 获取企业用户
    // async getAllEnterPriseUser() {
    //   let resultData = await ReqEnterPriseUser();
    //   const {
    //     page: { list },
    //   } = resultData;
    //   this.enterPriseUser = list;
    //   console.log(this.enterPriseUser);
    // },
    // 获取项目角色
    async getProjectRole() {
      let roleArr = []; //角色数组
      let resultData = await ReqCooperPersonUser();
      const { pg } = resultData;
      pg.forEach((item) => {
        item.personalUserEntities.forEach((it) => {
          const {
            userInfo: { expertise, name, id },
          } = it;
          this.otherCpnusers.push({ name, id });
          roleArr.push(expertise);
        });
      });
      roleArr = [...new Set(roleArr)]; //去重操作
      this.roles = roleArr;
      console.log(this.otherCpnusers);
    },
    //查询本公司的全部个人顾问用户
    // async getAllMyCpnUser() {
    //   let res = await ReqPersonalUser({ limit: 1000, page: 1 });
    //   const {
    //     page: { list },
    //   } = res;
    //   list.forEach((item) => {
    //     if (item) {
    //       const {
    //         userInfo: { name, id },
    //       } = item;
    //       this.myCpnusers.push({ name, id });
    //     }
    //   });
    //   console.log(this.myCpnusers);
    // },
    // 查询全部的管理员用户
    // async getAllAdminUsers() {
    //   let res = await ReqadminList({ limit: 1000, page: 1 });
    //   const {
    //     page: { list },
    //   } = res;
    //   list.forEach((item) => {
    //     const { id, username } = item;
    //     this.adminUsers.push({ id, username });
    //   });
    //   console.log(this.adminUsers);
    // },
    // 整合三级联动数据
   async dealOptions() {
      let arr = [];
      // 将其他合作伙伴和自己公司的个人顾问组合在一起
      let resultData = await ReqCooperPersonUser();
      let myCompany = await ReqPersonal({id:1})
      const { pg } = resultData;
      pg.push(myCompany.data)
      pg.forEach((first) => {
        let obj = {};
        obj.value = first.id;
        obj.label = first.industry;
        obj.children = [];
        first.personalUserEntities.forEach((second) => {
          obj.children.push({
            value: second.userInfo.id,
            label: second.userInfo.name,
          })
        });
        arr.push(obj);
      });
      this.options = arr;
    },
    // 保存信息
    async saveProject() {
      const demandId = this.$router.history.current.query.demandId;
      const userRelations = [];
      this.newArr.forEach((item) => {
        userRelations.push({
          cooperativeId: item[0],
          personalId: item[1],
          position: this.placeData,
        });
      });
      const requestData = {
        categoryId: this.categoryId,
        contact: this.contact,
        createdAdminId: 1,
        demandId: demandId,
        docFilesUrl: "",
        projectName: this.projectName,
        userRelations: userRelations,
      };
      const resInfo = await ReqAddProject(requestData);
      const { msg } = resInfo;
      if (msg === "success") {
        this.$message({
          type: "success",
          message: "项目创建成功",
        });
      }
      this.$router.history.push("/self/manage/ManReqAll");
    },
  },
  async created() {
    await this.getDemandDetailById();
    await this.getAllReqClassify();
    // await this.getAllEnterPriseUser();
    await this.getProjectRole();
    // await this.getAllMyCpnUser();
    // await this.getAllAdminUsers();
    await this.dealOptions(); //整合三级联动数据
  },
};
</script>

<style scoped>
@import url("~@/assets/styles/manage/reqDetailMobel.css");
.personCate {
  display: flex;
}
.personCate span:nth-child(1) {
  flex: 1;
  margin: 0px 10px;
}
.personCate span:nth-child(2) {
  flex:2
}
.personCate .el-icon-edit {
  color: black;
  font-size: 20px;
  cursor: pointer;
}

</style>
